<template>
	<div id="mars3dContainer"></div>
</template>

<script setup>
import { DBUtil } from '@u/indexedDB'
//引入cesium基础库
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as Cesium from 'mars3d-cesium'
import arrow from './textures/arrow.png'
import iconJJ from './textures/icon-jj.png'
import iconZC from './textures/icon-zc.png'
import iconYS from './textures/icon-ys.png'
import iconFM from './textures/icon-fm.png'
import iconTFJ from './textures/icon-tfj.png'
import iconFS from './textures/icon-fs.png'
import iconFS1 from './textures/icon-fs1.png'
import iconW from './textures/icon-w.png'
import iconE from './textures/icon-e.png'
import iconWSCF from './textures/icon-wscf.png'
import iconYFJ from './textures/icon-yfj.png'

//导入mars3d主库
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'

let map, graphicLayer
let graphicList = $ref([])

onMounted(() => {
	map = new mars3d.Map('mars3dContainer', {
		scene: {
			//默认视角参数
			center: { lat: 31.652663, lng: 117.082234, alt: 10000000, heading: 0, pitch: -90 },
			shadows: false, //是否启用日照阴影
			removeDblClick: true, //是否移除Cesium默认的双击事件
			//以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
			sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D,
			//以下是Cesium.Scene对象相关参数
			showSun: true, //是否显示太阳
			showMoon: true, //是否显示月亮
			showSkyBox: true, //是否显示天空盒
			showSkyAtmosphere: false, //是否显示地球大气层外光圈
			fog: false, //是否启用雾化效果
			fxaa: true, //是否启用抗锯齿
			contextOptions: { webgl: { alpha: true } }, // 允许透明
			//以下是Cesium.Globe对象相关参数
			globe: {
				show: true, // 不显示地球
				depthTestAgainstTerrain: true, //是否启用深度监测
				baseColor: '#425bbb', //地球默认背景色
				showGroundAtmosphere: false, //是否在地球上绘制的地面大气
				enableLighting: false //是否显示昼夜区域
			},
			//以下是Cesium.ScreenSpaceCameraController对象相关参数
			cameraController: {
				zoomFactor: 3.0, //鼠标滚轮放大的步长参数
				minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
				maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
				enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
				enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
				enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
				enableZoom: true, // 是否允许 用户放大和缩小视图
				enableCollisionDetection: true //是否允许 地形相机的碰撞检测
			}
		},
		control: {
			//以下是Cesium.Viewer所支持的控件相关的options
			homeButton: false, //视角复位按钮
			baseLayerPicker: false, //basemaps底图切换按钮，图层选择器，选择要显示的地图服务和地形服务
			sceneModePicker: false, //二三维切换按钮， 选择投影模式,有三种：3D,2D,哥伦布视图
			vrButton: false, //vr模式按钮
			fullscreenButton: false, //全屏按钮
			navigationHelpButton: false, //帮助按钮，显示默认的地图控制帮助
			animation: false, //动画部件按钮（左下角），控制视图动画的播放速度
			timeline: false, //时间线（下侧）,指示当前时间，并允许用户跳到特定的时间
			infoBox: false, //信息框
			geocoder: false, //POI查询按钮
			selectionIndicator: false, //选择框

			//以下是mars3d.control定义的控件
			contextmenu: { hasDefault: true }, // 右键菜单
			mouseDownView: false,
			// zoom: { insertIndex: 1 },
			// compass: { bottom: 'toolbar', left: '5px' },
			// distanceLegend: { left: '100px', bottom: '2px' },
			locationBar: {
				fps: false,
				crs: 'CGCS2000_GK_Zone_3',
				crsDecimal: 0,
				template: '<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>海拔：{alt}米</div> '
				// "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
			}
		},
		basemaps: [
			{
				name: '天地图影像(EPSG:4326)',
				icon: 'img/basemaps/tdt_img.png',
				type: 'group',
				layers: [
					{
						name: '底图',
						type: 'tdt',
						layer: 'img_d',
						crs: 'EPSG:4326',
						key: mars3d.Token.tiandituArr
					}
				],
				show: true
			},
			{ name: '离线地图', type: 'xyz', url: '/tiles/img/{z}/{x}/{y}.png', minimumLevel: 0, maximumLevel: 7 }
		]
	})
	map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
	// 固定光照时间
	map.clock.currentTime = Cesium.JulianDate.fromDate(new Date('2022-11-01 12:00:00'))
	// 固定光照方向
	map.scene.light = new Cesium.DirectionalLight({
		direction: map.scene.camera.direction
	})
	map.camera.percentageChanged = 0.001
	map.on(mars3d.EventType.cameraChanged, function (event) {
		map.scene.light.direction = map.scene.camera.direction
	})
	//webgl渲染失败后，刷新页面
	map.on(mars3d.EventType.renderError, function (event) {
		window.location.reload()
	})

	// 创建矢量数据图层
	graphicLayer = new mars3d.layer.GraphicLayer()
	map.addLayer(graphicLayer)
	new DBUtil().get(`${import.meta.env.VITE_APP_BASE_BASE || '/'}model/首页.glb`).then((blob) => {
		const model = new mars3d.graphic.ModelPrimitive({
			position: [117.076481, 31.660061, -20],
			style: {
				url: URL.createObjectURL(blob),
				scale: 10,
				heading: 50
			}
		})
		graphicLayer.addGraphic(model)
		map.setCameraView({ lat: 31.653087, lng: 117.081917, alt: 923.2, heading: 322, pitch: -51 }, { duration: 5 })
		setTimeout(() => {
			graphicLayer.addGraphic(
				new mars3d.graphic.LabelEntity({
					position: new mars3d.LngLatPoint(117.074479, 31.659018, 10),
					style: {
						text: '301综采面',
						font_family: '楷体',
						font_size: 30,
						color: '#ffffff'
					}
				})
			)
			graphicLayer.addGraphic(
				new mars3d.graphic.LabelEntity({
					position: new mars3d.LngLatPoint(117.076198, 31.657186, 10),
					style: {
						text: '404综采面',
						font_family: '楷体',
						font_size: 30,
						color: '#ffffff'
					}
				})
			)
			addWall()
			addTerrainClip()
			addGraphicFull()

			const graphic1 = new mars3d.graphic.ScrollWall({
				positions: [
					[117.078933, 31.660588, -20],
					[117.079976, 31.661346, -20],
					[117.079369, 31.661965, -20],
					[117.078796, 31.661846, -20],
					[117.078118, 31.662225, -20],
					[117.077656, 31.661889, -20]
				],
				style: {
					diffHeight: 60, // 高度
					color: '#3c68c1',
					speed: 20,
					reverse: true, // 方向：true往上、false往下
					bloom: true
				}
			})
			graphicLayer.addGraphic(graphic1)
			// graphicList.push(graphic1);
		}, 5000)
	})
})
addWall
// 组件卸载之前销毁mars3d实例
onUnmounted(() => {
	if (map) {
		map.destroy()
		map = null
	}
})
// 走马灯围墙效果
function addWall() {
	const graphic2 = new mars3d.graphic.ScrollWall({
		positions: [
			[117.074993, 31.659248, 0],
			[117.073593, 31.658236, 0],
			[117.073759, 31.658057, 0],
			[117.075159, 31.659078, 0]
		],
		style: {
			diffHeight: 30, // 高度
			color: '#449215',
			speed: 20,
			reverse: true // 方向：true往上、false往下
		}
	})
	graphicLayer.addGraphic(graphic2)
	graphicList.push(graphic2)
	const graphic3 = new mars3d.graphic.ScrollWall({
		positions: [
			[117.076761, 31.65744, 0],
			[117.076598, 31.657597, 0],
			[117.075337, 31.6567, 0],
			[117.075506, 31.656555, 0]
		],
		style: {
			diffHeight: 30, // 高度
			color: '#449215',
			speed: 20,
			reverse: true // 方向：true往上、false往下
		}
	})
	graphicLayer.addGraphic(graphic3)
	graphicList.push(graphic3)
}
// 贴图
function addDemoGraphic1() {
	graphicLayer.addGraphic(
		new mars3d.graphic.PolygonEntity({
			positions: [
				[117.072923, 31.658619, 10],
				[117.077268, 31.662534, 10],
				[117.08021, 31.658998, 10],
				[117.075122, 31.655724, 10]
			],
			style: {
				material: new Cesium.ImageMaterialProperty({
					image: `${import.meta.env.VITE_APP_BASE_BASE || '/'}model/home/矿道名称.png`,
					transparent: true
				})
			}
		})
	)
}
// 地质
function addTerrainClip() {
	const terrainClip = new mars3d.thing.TerrainClip({
		positions: [
			[117.072914, 31.658608],
			[117.074619, 31.660602],
			[117.077639, 31.662805],
			[117.079335, 31.662514],
			[117.080458, 31.661307],
			[117.078346, 31.659712],
			[117.079432, 31.658429],
			[117.07529, 31.655584],
			[117.073323, 31.657268]
		],
		diffHeight: 100, // 矿区深度
		image: `${import.meta.env.VITE_APP_BASE_BASE || '/'}model/home/mining.jpg`, // 井墙面贴图url
		imageBottom: `${import.meta.env.VITE_APP_BASE_BASE || '/'}model/home/poly-soil.jpg`, // 井底贴图url
		splitNum: 80 // wall边界插值数
	})
	map.addThing(terrainClip)
}
// 智能综采
function addGraphicFull() {
	const graphics = []
	// start 箭头线
	const graphic = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.075741, 31.656376, 0],
			[117.07704, 31.657315, 0],
			[117.076081, 31.658309, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic)
	const graphic1 = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.073672, 31.658252, 0],
			[117.07512, 31.659252, 0],
			[117.076081, 31.658309, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic1)
	const graphic2 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.076081, 31.658309, 0],
			[117.0789, 31.66045, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic2)
	const graphic3 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.0789, 31.66045, 0],
			[117.078566, 31.66081, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(4, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic3)
	// end 箭头线

	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.075914, 31.657233, 0],
		style: {
			image: iconZC,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '采煤机1' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('采煤机1')
	})
	graphics.push(icon1)
	const icon2 = new mars3d.graphic.BillboardEntity({
		position: [117.074241, 31.658702, 0],
		style: {
			image: iconZC,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '采煤机2' }
	})
	icon2.on('click', (e) => {
		e.stopPropagation()
		alert('采煤机2')
	})
	graphics.push(icon2)
	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}
// 智能掘进
function addGraphicDriving() {
	const graphics = []
	const graphic = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.07704, 31.657315, 0],
			[117.076081, 31.658309, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(10, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic)
	const graphic1 = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.07512, 31.659252, 0],
			[117.076081, 31.658309, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(10, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic1)
	const graphic2 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.076081, 31.658309, 0],
			[117.0789, 31.66045, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic2)
	const graphic3 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.0789, 31.66045, 0],
			[117.078566, 31.66081, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(4, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic3)

	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.07505, 31.659355, 0],
		style: {
			image: iconJJ,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '掘进机1' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('掘进机1')
	})
	graphics.push(icon1)
	const icon2 = new mars3d.graphic.BillboardEntity({
		position: [117.076949, 31.657398, 0],
		style: {
			image: iconJJ,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '掘进机2' }
	})
	icon2.on('click', (e) => {
		e.stopPropagation()
		alert('掘进机2')
	})
	graphics.push(icon2)
	//end icon
	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}

// 主煤流运输
function addGraphicTransport() {
	const graphics = []
	// start 箭头线
	const graphic = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.075741, 31.656376, 0],
			[117.07704, 31.657315, 0],
			[117.076081, 31.658309, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic)
	const graphic1 = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.073672, 31.658252, 0],
			[117.07512, 31.659252, 0],
			[117.076081, 31.658309, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic1)
	const graphic2 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.076081, 31.658309, 0],
			[117.0789, 31.66045, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic2)
	const graphic3 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.0789, 31.66045, 0],
			[117.078566, 31.66081, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(4, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic3)
	// end 箭头线

	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.077037, 31.659012, 0],
		style: {
			image: iconYS,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '运输机' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('运输机')
	})
	graphics.push(icon1)

	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}

// 瓦斯抽放
function addGraphicGas() {
	const graphics = []
	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.07879, 31.659511, 0],
		style: {
			image: iconWSCF,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '瓦斯抽放机' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('瓦斯抽放机')
	})
	graphics.push(icon1)

	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}
// 压风系统
function addGraphicAirCircle() {
	const graphics = []
	// start 箭头线
	const graphic = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.076051, 31.65827, 0],
			[117.076924, 31.657353, 0],
			[117.075665, 31.65644, 0]
		]),
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic)
	const graphic1 = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.076051, 31.65827, 0],
			[117.07512, 31.659252, 0],
			[117.073739, 31.658202, 0]
		]),
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic1)
	const graphic2 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.078934, 31.660397, 0],
			[117.076051, 31.65827, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic2)
	const graphic3 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.078566, 31.66081, 0],
			[117.078934, 31.660397, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(4, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic3)

	const graphic4 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.075733, 31.656364, 0],
			[117.077086, 31.657353, 0],
			[117.076183, 31.658267, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#8e6000',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic4)
	const graphic5 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.076183, 31.658267, 0],
			[117.079014, 31.660367, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#8e6000',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic5)
	// end 箭头线
	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.076052, 31.658303, 0],
		style: {
			image: iconYFJ,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '压风机1' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('压风机1')
	})
	graphics.push(icon1)
	const icon2 = new mars3d.graphic.BillboardEntity({
		position: [117.077986, 31.659626, 0],
		style: {
			image: iconYFJ,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '压风机2' }
	})
	icon2.on('click', (e) => {
		e.stopPropagation()
		alert('压风机2')
	})
	graphics.push(icon2)

	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}
// 压风系统
function addGraphicAirPress() {
	const graphics = []
	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.076052, 31.658303, 0],
		style: {
			image: iconYFJ,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '压风机1' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('压风机1')
	})
	graphics.push(icon1)
	const icon2 = new mars3d.graphic.BillboardEntity({
		position: [117.077986, 31.659626, 0],
		style: {
			image: iconYFJ,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '压风机2' }
	})
	icon2.on('click', (e) => {
		e.stopPropagation()
		alert('压风机2')
	})
	graphics.push(icon2)

	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}

// 电力系统
function addGraphicE() {
	const graphics = []
	// start 箭头线
	const graphic = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.076081, 31.658309, 0],
			[117.07704, 31.657315, 0],
			[117.075741, 31.656376, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic)
	const graphic1 = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.076081, 31.658309, 0],
			[117.07512, 31.659252, 0],
			[117.073672, 31.658252, 0]
		]),
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic1)
	const graphic2 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.0789, 31.66045, 0],
			[117.076081, 31.658309, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic2)
	const graphic3 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.078566, 31.66081, 0],
			[117.0789, 31.66045, 0]
		],
		style: {
			width: 10,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(4, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic3)
	// end 箭头线

	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.07606, 31.658086, 0],
		style: {
			image: iconE,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '电力1' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('电力1')
	})
	graphics.push(icon1)
	const icon2 = new mars3d.graphic.BillboardEntity({
		position: [117.075854, 31.658723, 0],
		style: {
			image: iconE,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '电力2' }
	})
	icon2.on('click', (e) => {
		e.stopPropagation()
		alert('电力2')
	})
	graphics.push(icon2)
	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}
// 排水系统
function addGraphicW() {
	const graphics = []
	// start 箭头线
	const graphic = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.076051, 31.65827, 0],
			[117.076924, 31.657353, 0],
			[117.075665, 31.65644, 0]
		]),
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic)
	const graphic1 = new mars3d.graphic.PolylinePrimitive({
		positions: mars3d.PolyUtil.interLine([
			[117.076051, 31.65827, 0],
			[117.07512, 31.659252, 0],
			[117.073739, 31.658202, 0]
		]),
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic1)
	const graphic2 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.078934, 31.660397, 0],
			[117.076051, 31.65827, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic2)
	const graphic3 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.078566, 31.66081, 0],
			[117.078934, 31.660397, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#1b6704',
				repeat: new Cesium.Cartesian2(4, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic3)

	const graphic4 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.075733, 31.656364, 0],
			[117.077086, 31.657353, 0],
			[117.076183, 31.658267, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#8e6000',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic4)
	const graphic5 = new mars3d.graphic.PolylinePrimitive({
		positions: [
			[117.076183, 31.658267, 0],
			[117.079014, 31.660367, 0]
		],
		style: {
			width: 5,
			materialType: mars3d.MaterialType.LineFlow,
			materialOptions: {
				speed: 40,
				// 动画线材质
				image: arrow,
				color: '#8e6000',
				repeat: new Cesium.Cartesian2(20, 1)
			}
		},
		attr: { remark: '智能综采' }
	})
	graphics.push(graphic5)
	// end 箭头线

	//start icon
	const icon1 = new mars3d.graphic.BillboardEntity({
		position: [117.07606, 31.658086, 0],
		style: {
			image: iconW,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '排水1' }
	})
	icon1.on('click', (e) => {
		e.stopPropagation()
		alert('排水1')
	})
	graphics.push(icon1)
	const icon2 = new mars3d.graphic.BillboardEntity({
		position: [117.075854, 31.658723, 0],
		style: {
			image: iconW,
			horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
			verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
			visibleDepth: false,
			scale: 1,
			highlight: {
				scale: 1.2
			}
		},
		attr: { remark: '排水2' }
	})
	icon2.on('click', (e) => {
		e.stopPropagation()
		alert('排水2')
	})
	graphics.push(icon2)
	//end icon

	graphics.forEach((i) => graphicLayer.addGraphic(i))
	graphicList = [...graphicList, ...graphics]
}

/**
 * 0 智能综采
 * 1 掘进
 * 2 主煤流运输
 * 3 通风
 * 4 压风机
 * 5 瓦斯
 * 6 电力
 * 7 排水
 * @param {0} index
 */
const handleTabChange = (index) => {
	clear()
	switch (index) {
		case 0:
			addGraphicFull()
			addWall()
			break
		case 1:
			addGraphicDriving()
			addWall()
			break
		case 2:
			addGraphicTransport()
			break
		case 3:
			addGraphicAirCircle()
			break
		case 4:
			addGraphicAirPress()
			break
		case 5:
			addGraphicGas()
			break
		case 6:
			addGraphicE()
			break
		case 7:
			addGraphicW()
			break

		default:
			break
	}
}

const clear = () => {
	graphicList.forEach((item) => {
		graphicLayer.removeGraphic(item, true)
	})
	graphicList = []
}

defineExpose({
	handleTabChange
})
</script>

<style lang="scss">
/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
	top: 100px !important;
	bottom: auto !important;
	left: auto !important;
	right: -60px !important;
}
.cesium-toolbar-button img {
	height: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
	margin-bottom: 5px;
	float: left;
	clear: both;
	text-align: center;
}
.cesium-button {
	background-color: rgba(23, 49, 71, 0.8);
	color: #e6e6e6;
	fill: #e6e6e6;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	line-height: 32px;
}
.cesium-button:hover {
	background: #3ea6ff;
}

/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
	bottom: 0;
	left: 40px;
	max-height: 700px;
	margin-bottom: 5px;
	background-color: rgba(23, 49, 71, 0.8);
}

/**cesium 帮助面板*/
.cesium-navigation-help {
	top: auto;
	bottom: 0;
	left: 40px;
	transform-origin: left bottom;
	background: none;
	background-color: rgba(23, 49, 71, 0.8);
	.cesium-navigation-help-instructions {
		background: none;
	}
	.cesium-navigation-button {
		background: none;
	}
	.cesium-navigation-button-selected,
	.cesium-navigation-button-unselected:hover {
		background: rgba(0, 138, 255, 0.2);
	}
}

/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
	width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
	float: right;
	margin: 0 3px;
}

/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
	left: 0;
	right: 40px;
	width: auto;
	z-index: 9999;
}
.cesium-geocoder-searchButton {
	background-color: rgba(23, 49, 71, 0.8);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
	background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
	background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
	background-color: rgba(23, 49, 71, 0.8);
}

/**cesium info信息框*/
.cesium-infoBox {
	top: 50px;
	background-color: rgba(23, 49, 71, 0.8);
}
.cesium-infoBox-title {
	background-color: rgba(23, 49, 71, 0.8);
}

/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
	top: auto;
	bottom: 35px;
	right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
	color: #fff;
}

/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
	top: 10px;
	left: 10px;
	right: auto;
}
.cesium-cesiumInspector {
	background-color: rgba(23, 49, 71, 0.8);
}

/**覆盖mars3d内部控件的颜色等样式*/
.mars3d-compass .mars3d-compass-outer {
	fill: rgba(23, 49, 71, 0.8);
}
.mars3d-compass {
	top: 30px !important;
	right: 10px !important;
	left: auto !important;
}
.mars3d-contextmenu-ul,
.mars3d-sub-menu {
	background-color: rgba(23, 49, 71, 0.8);

	> li > a:hover,
	> li > a:focus,
	> li > .active {
		background-color: #3ea6ff;
	}

	> .active > a,
	> .active > a:hover,
	> .active > a:focus {
		background-color: #3ea6ff;
	}
}

/* Popup样式*/
.mars3d-popup-color {
	color: #ffffff;
}
.mars3d-popup-background {
	background: rgba(23, 49, 71, 0.8);
}
.mars3d-popup-content {
	margin: 15px;
}
.mars3d-template-content label {
	padding-right: 6px;
}
.mars3d-template-titile {
	border-bottom: 1px solid #3ea6ff;
}
.mars3d-template-titile a {
	font-size: 16px;
}
.mars3d-tooltip {
	background: rgba(23, 49, 71, 0.8);
	border: 1px solid rgba(23, 49, 71, 0.8);
}

.mars3d-popup-btn-custom {
	padding: 3px 10px;
	border: 1px solid #209ffd;
	background: #209ffd1c;
}
</style>
